<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-global"></i>
          商家审核
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="search.mobile"
          placeholder="用户手机号"
          class="handle-input mr10"
          width="55"
        ></el-input>
        <el-input
          v-model="search.userMobile"
          placeholder="经营人手机号"
          class="handle-input mr10"
          width="55"
        ></el-input>
        <el-input
          v-model="search.userName"
          placeholder="经营人姓名"
          class="handle-input mr10"
          width="55"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="merchantType" label="申请类型" width="90">
          <template #default="scope">
            <el-tag :type="scope.row.merchantType == 1 ? 'success' : 'primary'">
              {{ scope.row.merchantType == 1 ? "服务商" : "商户" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="merchantName"
          label="商户名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="branchName"
          label="分店名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="classifyName"
          label="行业分类"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="corporateName"
          label="法人姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="accountName"
          label="账户名称"
          width="120"
        ></el-table-column>
        <el-table-column label="地区" width="200">
          <template #default="scope">
            {{ scope.row.province }} {{ scope.row.city }}
            {{ scope.row.district }}
          </template>
        </el-table-column>
        <el-table-column
          prop="storeAddress"
          label="详细地址"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="联系人"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="userMobile"
          label="联系电话"
          width="120"
        ></el-table-column>
        <el-table-column label="门头照" width="80">
          <template #default="scope">
            <el-image
              v-if="scope.row.storeLargePicture"
              class="table-td-thumb"
              :src="pic(scope.row.storeLargePicture)"
              :preview-src-list="[pic(scope.row.storeLargePicture)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="营业执照" width="80">
          <template #default="scope">
            <el-image
              v-if="scope.row.businessLicenseFront"
              class="table-td-thumb"
              :src="pic(scope.row.businessLicenseFront)"
              :preview-src-list="[pic(scope.row.businessLicenseFront)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="身份证正面" width="80">
          <template #default="scope">
            <el-image
              v-if="scope.row.idCardFront"
              class="table-td-thumb"
              :src="pic(scope.row.idCardFront)"
              :preview-src-list="[pic(scope.row.idCardFront)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="身份证反面" width="80">
          <template #default="scope">
            <el-image
              v-if="scope.row.idCardBack"
              class="table-td-thumb"
              :src="pic(scope.row.idCardBack)"
              :preview-src-list="[pic(scope.row.idCardBack)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="手持身份证" width="80">
          <template #default="scope">
            <el-image
              v-if="scope.row.idCardHold"
              class="table-td-thumb"
              :src="pic(scope.row.idCardHold)"
              :preview-src-list="[pic(scope.row.idCardHold)]"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间"
          width="160"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column
          prop="auditTime"
          label="审核时间"
          width="160"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column label="审核状态" width="90" fixed="right">
          <template #default="scope">
            <el-tag v-if="scope.row.isAudit == 0" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.isAudit == 1" type="success"
              >已通过</el-tag
            >
            <el-tag v-else type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusRemarks"
          label="审核备注"
          width="150"
          show-overflow-tooltip
          fixed="right"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="text"
              v-if="scope.row.isAudit == 0"
              @click="handlePass(scope.row)"
              >通过</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.isAudit == 0"
              class="red"
              @click="handleRefuse(scope.row)"
              >拒绝</el-button
            >
            <!-- <el-button -->
            <!--   type="text" -->
            <!--   @click="handleViewDetail(scope.row)" -->
            <!--   >详情</el-button -->
            <!-- > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 详情弹出框 -->
    <el-dialog title="商家详情" v-model="detailVisible" width="800px">
      <el-descriptions :column="2" border v-if="detailData">
        <el-descriptions-item label="ID">{{
          detailData.id
        }}</el-descriptions-item>
        <el-descriptions-item label="申请类型">
          <el-tag :type="detailData.merchantType == 1 ? 'success' : 'primary'">
            {{ detailData.merchantType == 1 ? "服务商" : "商户" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商户名称">{{
          detailData.merchantName
        }}</el-descriptions-item>
        <el-descriptions-item label="分店名称">{{
          detailData.branchName
        }}</el-descriptions-item>
        <el-descriptions-item label="行业分类">{{
          detailData.classifyName
        }}</el-descriptions-item>
        <el-descriptions-item label="法人姓名">{{
          detailData.corporateName
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{
          detailData.idCard
        }}</el-descriptions-item>
        <el-descriptions-item label="账户名称">{{
          detailData.accountName
        }}</el-descriptions-item>
        <el-descriptions-item label="所在地区" :span="2">
          {{ detailData.province }} {{ detailData.city }}
          {{ detailData.district }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址" :span="2">{{
          detailData.storeAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{
          detailData.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          detailData.userMobile
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间" :span="2">
          {{
            detailData.createTime
              ? dateFormat(
                  { createTime: detailData.createTime },
                  { property: "createTime" },
                )
              : "-"
          }}
        </el-descriptions-item>
        <el-descriptions-item label="审核时间" :span="2">
          {{
            detailData.auditTime
              ? dateFormat(
                  { auditTime: detailData.auditTime },
                  { property: "auditTime" },
                )
              : "-"
          }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag v-if="detailData.isAudit == 0" type="warning">待审核</el-tag>
          <el-tag v-else-if="detailData.isAudit == 1" type="success"
            >已通过</el-tag
          >
          <el-tag v-else type="danger">已拒绝</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核备注" :span="2">{{
          detailData.statusRemarks || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="门头照" :span="2">
          <el-image
            v-if="detailData.storeLargePicture"
            style="width: 200px; height: 150px"
            :src="pic(detailData.storeLargePicture)"
            :preview-src-list="[pic(detailData.storeLargePicture)]"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="营业执照" :span="2">
          <el-image
            v-if="detailData.businessLicenseFront"
            style="width: 200px; height: 150px"
            :src="pic(detailData.businessLicenseFront)"
            :preview-src-list="[pic(detailData.businessLicenseFront)]"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="身份证正面">
          <el-image
            v-if="detailData.idCardFront"
            style="width: 200px; height: 150px"
            :src="pic(detailData.idCardFront)"
            :preview-src-list="[pic(detailData.idCardFront)]"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="身份证反面">
          <el-image
            v-if="detailData.idCardBack"
            style="width: 200px; height: 150px"
            :src="pic(detailData.idCardBack)"
            :preview-src-list="[pic(detailData.idCardBack)]"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="手持身份证" :span="2">
          <el-image
            v-if="detailData.idCardHold"
            style="width: 200px; height: 150px"
            :src="pic(detailData.idCardHold)"
            :preview-src-list="[pic(detailData.idCardHold)]"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "../../api/index";
import { formatDate } from "../../common/data";
import moment from "moment";
export default {
  inject: ["reload"],
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  name: "basetable",
  data() {
    return {
      query: {
        pageNo: 1,
      },
      search: {},
      tableData: [],
      pageTotal: 0,
      list: {},
      detailVisible: false,
      detailData: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    pic(item) {
      return `https://mall.xiyibaomall.com/imgs/${item}`;
    },

    // 获取商家列表
    getData() {
      api("/web/subscribersMerchant/lists", {
        mobile: this.search.mobile,
        userMobile: this.search.userMobile,
        userName: this.search.userName,
        limit: 10,
        offset: this.query.pageNo,
      }).then((res) => {
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
      });
    },

    // 触发搜索按钮
    handleSearch() {
      this.query.pageNo = 1;
      this.getData();
    },

    // 查看详情
    handleViewDetail(row) {
      this.detailData = row;
      this.detailVisible = true;
    },

    // 通过审核
    handlePass(row) {
      this.$confirm("确定通过此用户的申请？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "通过审核",
        cancelButtonText: "取消",
      }).then(() => {
        api("/web/subscribersMerchant/verify", {
          id: row.id,
          isAudit: 1,
          auditRemarks: "",
        }).then((res) => {
          if (res.code === 2000) {
            this.$message.success(res.message);
            this.reload();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    handleRefuse(row) {
      this.$prompt("请输入审核备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          api("/web/subscribersMerchant/verify", {
            id: row.id,
            isAudit: 2,
            auditRemarks: value,
          }).then((res) => {
            if (res.code === 2000) {
              this.$message.success(res.message);
              this.reload();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //修改分类
    edit() {
      this.showAddUser = false;
      api("/web/subscribersMerchant/verify", this.list).then((res) => {
        if (res.code === 2000) {
          this.$message.success("修改分类成功");
          this.list = {};
          this.reload();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 分页导航
    handlePageChange(val) {
      // console.log(val);
      this.query.pageNo = val;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.crop-demo {
  display: flex;
  align-items: flex-end;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 178px;
  height: 178px;

  .pre-img {
    width: 178px;
    height: 178px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
    object-fit: cover;
  }

  .crop-input {
    position: absolute;
    width: 178px;
    height: 178px;
    left: 0px;
    top: 0px;
    opacity: 0;
    cursor: pointer;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
}

.bigImage {
  width: 100%;
}
</style>
